<template>
  <div>
    <van-tabs v-model:active="active" title-active-color="#ff5f16" route>
      <van-tab title="正在热映">
        <!-- <van-pull-refresh v-model="loading" @refresh="onRefresh"> -->
        <!-- <filmsView v-for="item in list" :key="item.filmId" :item="item"></filmsView> -->
        <!-- </van-pull-refresh> -->
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <filmsView v-for="item in list" :key="item.filmId" :item="item"></filmsView>
        </van-list>
        <!-- </van-pull-refresh> -->
      </van-tab>
      <van-tab title="即将上映"></van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import filmsView from '../../components/films/filmsView.vue'

import { List } from './hooks'

const { onLoad, loading, finished, list } = List()

// import { onBeforeRouteUpdate } from 'vue-router'
import { ref, watch } from 'vue'

// onBeforeRouteUpdate((to, from, next) => {
//   // 在路由切换时 手动触发下拉刷新操作
//   onRefresh()
//   next()
// })

const active = ref(0)
// const loading = ref(false)
// const onRefresh = () => {
//   setTimeout(() => {
//     loading.value = false
//   }, 1000)
// }

// watch(active, (newValue: number) => {
//   sessionStorage.setItem('FilmHome', JSON.stringify(newValue))
// })
// active.value = Number(sessionStorage.getItem('FilmHome'))
</script>

<style scoped>
.van-tabs >>> .van-tabs__line {
  background: #ff5f16;
  width: 60px;
}
.a {
  /* width: 100%; */
  height: 124px;
  border-bottom: 1px solid #f8f8f8;
  margin-left: 16px;
}
.b {
  border-bottom: 1px solid #f8f8f8;
}
.a1 {
  width: 345px;
  height: 96px;
  margin-top: 16px;
  display: flex;
}
.a1 img {
  margin-right: 16px;
}
.a1a {
  width: 201px;
  height: 79px;
  margin-top: 10px;
}
.a1a h1 {
  width: 100%;
  height: 15px;
}
.a1a p {
  margin-top: 25px;
  color: #797d82;
  height: 17px;
  overflow: hidden;
}
.a1a p:nth-of-type(2) {
  margin-top: 10px;
}
button {
  width: 55px;
  height: 26px;
  font-size: 12px;
  background: #fff;
  border: 1px solid #ff5f16;
  color: #ff5f16;
  margin-top: 30px;
  border-radius: 1px;
}
.van-list {
  margin-bottom: 100px;
}
</style>
